<template>
	<view class="mine-container">
		<!-- 用户信息 -->
		<view class="user-info-box">
			<view class="user-avatar">
				<image :src="userInfo.avatar || '/static/images/default-avatar.png'" mode="aspectFill"></image>
			</view>
			<view class="user-details" v-if="isLogin">
				<text class="user-name">{{userInfo.nickname || (userInfo.userId ? '书友' + userInfo.userId : '书友')}}</text>
				<text class="user-id">ID: {{userInfo.userId || '未登录'}}</text>
			</view>
			<view class="login-btn" v-else @click="goToLogin">
				<text>登录/注册</text>
			</view>
		</view>
		
		<!-- 功能菜单 -->
		<view class="menu-section">
			<!-- 我的收藏 -->
			<view class="menu-item" @click="handleMenuClick('favorites')">
				<view class="menu-icon favorites-icon">
					<text class="iconfont icon-star"></text>
				</view>
				<text class="menu-text">我的收藏</text>
				<text class="iconfont icon-right arrow"></text>
			</view>
			
			<!-- 阅读历史 -->
			<view class="menu-item" @click="handleMenuClick('history')">
				<view class="menu-icon history-icon">
					<text class="iconfont icon-history"></text>
				</view>
				<text class="menu-text">阅读历史</text>
				<text class="iconfont icon-right arrow"></text>
			</view>
			
			<!-- 我的评论 -->
			<view class="menu-item" @click="handleMenuClick('comments')">
				<view class="menu-icon comments-icon">
					<text class="iconfont icon-comment"></text>
				</view>
				<text class="menu-text">我的评论</text>
				<text class="iconfont icon-right arrow"></text>
			</view>
		</view>
		
		<!-- 设置菜单 -->
		<view class="menu-section">
			<!-- 账号设置 -->
			<view class="menu-item" @click="handleMenuClick('settings')">
				<view class="menu-icon settings-icon">
					<text class="iconfont icon-setting"></text>
				</view>
				<text class="menu-text">账号设置</text>
				<text class="iconfont icon-right arrow"></text>
			</view>
			
			<!-- 关于我们 -->
			<view class="menu-item" @click="handleMenuClick('about')">
				<view class="menu-icon about-icon">
					<text class="iconfont icon-info"></text>
				</view>
				<text class="menu-text">关于我们</text>
				<text class="iconfont icon-right arrow"></text>
			</view>
		</view>
		
		<!-- 退出登录按钮 -->
		<view class="logout-button" v-if="isLogin" @click="handleLogout">
			<text>退出登录</text>
		</view>
	</view>
</template>

<script>
	import { ref, computed, onMounted } from 'vue';
	
	export default {
		setup() {
			// 用户信息
			const userInfo = ref({});
			const isLogin = computed(() => !!uni.getStorageSync('token'));
			
			// 初始化
			onMounted(() => {
				loadUserInfo();
			});
			
			// 加载用户信息
			function loadUserInfo() {
				// 从本地存储获取用户信息
				const savedUserInfo = uni.getStorageSync('userInfo');
				if (savedUserInfo) {
					try {
						userInfo.value = typeof savedUserInfo === 'string' ? JSON.parse(savedUserInfo) : savedUserInfo;
					} catch (error) {
						console.error('解析用户信息失败:', error);
					}
				}
			}
			
			// 跳转到登录页 - 通过中间路由页
			function goToLogin() {
				console.log('准备通过中间页跳转到登录页面');
				
				// 先在本地存储标记正在跳转的状态
				uni.setStorageSync('isRedirectingToLogin', 'true');
				
				// 使用导航到中间路由页，让中间页处理登录跳转逻辑
				uni.navigateTo({
					url: '/pages/login-route/login-route',
					success: function() {
						console.log('已跳转到登录中间页');
					},
					fail: function(err) {
						console.error('跳转登录中间页失败:', err);
						// 如果失败，尝试直接跳转到登录页
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}, 200);
					}
				});
			}
			
			// 处理菜单点击
			function handleMenuClick(type) {
				// 需要登录的功能
				const needLoginTypes = ['favorites', 'history', 'comments', 'settings'];
				
				if (needLoginTypes.includes(type) && !isLogin.value) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					setTimeout(() => {
						goToLogin();
					}, 1000);
					return;
				}
				
				// 根据类型跳转到不同页面
				switch (type) {
					case 'favorites':
						uni.navigateTo({ url: '/pages/favorites/favorites' });
						break;
					case 'history':
						uni.navigateTo({ url: '/pages/history/history' });
						break;
					case 'comments':
						uni.navigateTo({ url: '/pages/comments/comments' });
						break;
					case 'settings':
						uni.navigateTo({ url: '/pages/settings/settings' });
						break;
					case 'about':
						uni.navigateTo({ url: '/pages/about/about' });
						break;
					default:
						break;
				}
			}
			
			// 处理退出登录
			function handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确认退出登录？',
					success: (res) => {
						if (res.confirm) {
							// 清除登录信息
							uni.removeStorageSync('token');
							uni.removeStorageSync('userInfo');
							userInfo.value = {};
							
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							});
						}
					}
				});
			}
			
			return {
				userInfo,
				isLogin,
				goToLogin,
				handleMenuClick,
				handleLogout
			}
		}
	}
</script>

<style lang="scss">
	.mine-container {
		min-height: 100vh;
		background-color: #f8f8f8;
		padding-bottom: 40rpx;
		
		/* 用户信息区域 */
		.user-info-box {
			display: flex;
			align-items: center;
			padding: 40rpx 20rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			
			/* 头像 */
			.user-avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
				overflow: hidden;
				margin-right: 20rpx;
				border: 2rpx solid rgba(0,0,0,0.1);
				
				image {
					width: 100%;
					height: 100%;
				}
			}
			
			/* 用户详情 */
			.user-details {
				display: flex;
				flex-direction: column;
				
				.user-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 10rpx;
				}
				
				.user-id {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			/* 登录按钮 */
			.login-btn {
				padding: 16rpx 40rpx;
				background-color: #1296db;
				color: #fff;
				border-radius: 40rpx;
				font-size: 28rpx;
			}
		}
		
		/* 菜单区块 */
		.menu-section {
			background-color: #fff;
			border-radius: 12rpx;
			margin: 0 20rpx 20rpx;
			overflow: hidden;
			
			/* 菜单项 */
			.menu-item {
				display: flex;
				align-items: center;
				padding: 30rpx 20rpx;
				border-bottom: 1px solid #f0f0f0;
				
				&:last-child {
					border-bottom: none;
				}
				
				/* 菜单图标 */
				.menu-icon {
					width: 60rpx;
					height: 60rpx;
					border-radius: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
					color: #fff;
					font-size: 30rpx;
					
					&.favorites-icon {
						background-color: #FFB800;
					}
					
					&.history-icon {
						background-color: #1890FF;
					}
					
					&.comments-icon {
						background-color: #52C41A;
					}
					
					&.settings-icon {
						background-color: #722ED1;
					}
					
					&.about-icon {
						background-color: #F5222D;
					}
				}
				
				/* 菜单文字 */
				.menu-text {
					flex: 1;
					font-size: 28rpx;
					color: #333;
				}
				
				/* 右箭头 */
				.arrow {
					font-size: 24rpx;
					color: #ccc;
				}
			}
		}
		
		/* 退出登录按钮 */
		.logout-button {
			margin: 60rpx 20rpx;
			padding: 20rpx 0;
			text-align: center;
			background-color: #fff;
			color: #f56c6c;
			border-radius: 12rpx;
			font-size: 32rpx;
		}
	}
</style>
